<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search">
      <image src="../../static/icon/search.png" mode="aspectFill" style="width: 40rpx; height: 40rpx; position: absolute; left: 50rpx"></image>
      <input type="text" v-model="name" placeholder="请输入科目" @blur="search" class="ipt" placeholder-class="txtwhite" />
    </view>
    <!-- navbar导航栏 -->
    <view class="navbar">
      <view :class="{ common: status == index }" style="padding-bottom: 4rpx" v-for="(item, index) in navbarlist" :key="index" @click="changenav(index)">{{ item }}</view>
    </view>
    <!-- 全部订单 -->
    <view class="list" v-if="status == 0">
      <view class="item" v-for="item in list" :key="item.id" @click="goalldetail(item.status, item.id)">
        <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
        <view class="right">
          <view class="name">
            <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">{{ item.username }}</view>
            <image src="../../static/icon/nan.png" mode="" style="width: 42rpx; height: 42rpx"></image>
            <view class="school" v-if="item.school != ''">{{ item.school }}</view>
          </view>
          <view class="subject">{{ item.grade_name + '/' + item.subject_name }}</view>
          <!-- 未预约时间立即接单 -->
          <view class="long" v-if="item.ago_time.agotimeIs == 2 && item.status == 2">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">{{ item.distance }}km</view>
            <view class="jiedan" @click.stop="jiedan(item.id)">立即接单</view>
          </view>
          <!-- 预约时间立即接单 -->
          <view class="long" v-if="item.ago_time.agotimeIs == 0 && item.status == 2">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">{{ item.distance }}km</view>
            <view class="jiedan" @click.stop="jiedan(item.id)">立即接单</view>
          </view>
          <view class="long" v-if="item.ago_time.agotimeIs == 1 || (item.ago_time.agotimeIs == 2 && item.status == 3)">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">已授课程{{ item.period_out + '/' + item.period_num }}</view>
            <view style="flex: 1; text-align: right; font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8">
              {{ item.ago_time.agotimeIs == 1 ? '距离上课还有' + item.ago_time.agotime : item.ago_time.agotimeIs == 0 ? item.ago_time.agotime : item.ago_time.agotime + '上课' }}
            </view>
          </view>
          <view class="long" v-if="item.ago_time.agotimeIs == 0 && item.status == 3">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">已授课程{{ item.period_out + '/' + item.period_num }}</view>
          </view>
          <view class="long" v-if="item.status == 4 || item.status == 5 || item.status == 8">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">已授课程{{ item.period_out + '/' + item.period_num }}</view>
          </view>
          <view v-if="item.status == 8">课程已退款</view>
        </view>
      </view>
    </view>
    <!-- 待接单、进行中、已结课、 -->
    <view class="list" v-else>
      <view class="item" v-for="item in list" :key="item.id" @click="godetail(item.id)">
        <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
        <view class="right">
          <view class="name">
            <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">{{ item.username }}</view>
            <image src="../../static/icon/nan.png" mode="" style="width: 42rpx; height: 42rpx"></image>
            <view class="school" v-if="item.school != ''">{{ item.school }}</view>
          </view>
          <view class="subject">{{ item.grade_name + '|' + item.subject_name }}</view>
          <!-- 待接单 -->
          <view class="long" v-if="status == 1">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">{{ item.distance }}km</view>
            <view class="jiedan" @click.stop="jiedan(item.id)">立即接单</view>
          </view>
          <!-- 进行中 -->
          <view class="long" v-if="status == 2">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">已授课程{{ item.period_out + '/' + item.period_num }}</view>
            <view style="flex: 1; text-align: right; font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8">
              {{
                item.ago_time.agotimeIs == 1
                  ? '距离上课还有' + item.ago_time.agotime
                  : item.ago_time.agotimeIs == 2
                  ? item.ago_time.agotime + '上课'
                  : item.ago_time.agotimeIs == 0
                  ? item.ago_time.agotime
                  : ''
              }}
            </view>
          </view>
          <!-- 已结课 -->
          <view class="long" v-if="status == 3">
            <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">已授课程{{ item.period_out + '/' + item.period_num }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      navbarlist: ['全部订单', '待接单', '进行中', '已结课'],
      status: 0,
      page: 1,
      name: '',
      list: [],
      imgUrl: '',
      timer1: null,
      timer2: null,
      timer3: null
    };
  },
  methods: {
    // 倒计时
    countdown(time) {
      let hours = time.split(':')[0];
      let minute = time.split(':')[1];
      let second = time.split(':')[2];
      let miao = hours * 60 * 60 + minute * 60 + second;
      miao--;
      let timer = setInterval(() => {
        miao--;
        if (miao == 0) {
          this.getorderlist();
          clearInterval(timer);
          timer = null;
        }
      }, 1000);
      return dayjs(miao * 1000).format('hh:mm:ss');
    },
    // 接单
    async jiedan(id) {
      const res = await uni.$http.post('/teacher_order/takingOrder', {
        order_id: id
      });
      console.log('接单成功', res.data);
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
      console.log('教师接单', res);
      if (this.status == 1) {
        uni.$http
          .post('/teacher_order/orderList', {
            status: '2',
            page: this.page,
            name: this.name
          })
          .then((res) => {
            console.log(res);
            this.list = res.data.data.list;
          });
      }
      if (this.status == 0) {
        this.getorderlist();
      }
    },
    // 搜索
    search() {
      this.page = 1;
      this.list = [];
      this.status = 0;
      this.getorderlist();
      this.name = '';
    },
    // 切换导航
    changenav(index) {
      this.list = [];
      this.status = index;
      clearInterval(this.timer1);
      clearInterval(this.timer3);
      if (index == 0) {
        this.getorderlist();
        this.timer1 = setInterval(() => {
          this.getorderlist();
        }, 2000);
      } else if (index == 1) {
        uni.$http
          .post('/teacher_order/orderList', {
            status: '2',
            page: this.page,
            name: this.name
          })
          .then((res) => {
            console.log(res);
            this.list = res.data.data.list;
          });
      } else if (index == 2) {
        uni.$http
          .post('/teacher_order/orderList', {
            status: '3',
            page: this.page,
            name: this.name
          })
          .then((res) => {
            console.log(res);
            this.list = res.data.data.list;
          });
        this.timer3 = setInterval(() => {
          uni.$http
            .post('/teacher_order/orderList', {
              status: '3',
              page: this.page,
              name: this.name
            })
            .then((res) => {
              console.log(res);
              this.list = res.data.data.list;
            });
        }, 2000);
      } else if (index == 3) {
        uni.$http
          .post('/teacher_order/orderList', {
            status: '4',
            page: this.page,
            name: this.name
          })
          .then((res) => {
            console.log(res);
            this.list = res.data.data.list;
          });
      }
    },
    // 获取订单
    getorderlist() {
      uni.$http
        .post('/teacher_order/orderList', {
          status: '0',
          page: this.page,
          name: this.name
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.data.list;
        });
    },
    // 跳转到立即接单页面
    reciveorder(id) {
      uni.navigateTo({
        url: '/teacher/waitorderdetail/waitorderdetail?id=' + id
      });
    },
    // 全部订单跳转到详情
    goalldetail(status, id) {
      if (status == 2) {
        uni.navigateTo({
          url: '/teacher/waitorderdetail/waitorderdetail?id=' + id
        });
      } else if (status == 3) {
        uni.navigateTo({
          url: '/teacher/doingdetail/doingdetail?id=' + id
        });
      } else if (status == 4 || status == 5) {
        uni.navigateTo({
          url: '/teacher/overdetail/overdetail?id=' + id
        });
      } else if (status == 8) {
        uni.navigateTo({
          url: '/teacher/refunddetail/refunddetail?id=' + id
        });
      }
    },
    // 跳转到详情
    godetail(id) {
      if (this.status == 1) {
        uni.navigateTo({
          url: '/teacher/waitorderdetail/waitorderdetail?id=' + id
        });
      } else if (this.status == 2) {
        uni.navigateTo({
          url: '/teacher/doingdetail/doingdetail?id=' + id
        });
      } else if (this.status == 3) {
        uni.navigateTo({
          url: '/teacher/overdetail/overdetail?id=' + id
        });
      }
    }
  },
  onLoad() {
    this.getorderlist();
    this.imgUrl = this.imgurl;
  },
  onShow() {},
  onHide() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    clearInterval(this.timer3);
  },

  onUnload() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    clearInterval(this.timer3);
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .search {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    background-color: #3553e8;
    .ipt {
      box-sizing: border-box;
      font-size: 28rpx;
      background: #5d75ed;
      padding-left: 80rpx;
      color: #fff;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      width: 690rpx;
      height: 64rpx;
    }
  }
  .navbar {
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
    .common {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #3553e8;
      border-bottom: 8rpx solid #3553e8;
    }
  }
  .list {
    box-sizing: border-box;
    margin: 30rpx;
    .item {
      display: flex;
      width: 690rpx;
      height: 186rpx;
      margin-bottom: 40rpx;
      .right {
        flex: 1;
        margin-left: 20rpx;
        .name {
          display: flex;
          .school {
            font-size: 22rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            width: 172rpx;
            height: 40rpx;
            background: #eaedfd;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            color: #3553e8;
            text-align: center;
            line-height: 40rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .subject {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
        }
        .long {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 18rpx;
          .jiedan {
            box-sizing: border-box;
            width: 160rpx;
            height: 60rpx;
            text-align: center;
            line-height: 60rpx;
            font-size: 28rpx;
            color: #fff;
            background: #3553e8;
            border-radius: 100rpx 100rpx 100rpx 100rpx;
          }
        }
      }
    }
  }
  /deep/ .txtwhite {
    color: #fff !important;
  }
}
</style>
